<template>
  <!-- 折线图图   -->
  <div id="main" ref="RadarChart" class="RadarChart" style="width: 100%; height: 100%" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'RadarChart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.RadarChart)
      //   绘制图标
      myChart.setOption({
        // backgroundColor: '#161627',

        radar: {
          center: ['50%', '50%'],
          // 外半径占据容器大小
          radius: '45%',
          // 指示器轴的分割段数
          splitNumber: 4,
          indicator: [
            { name: '机场', max: 100 },
            { name: '商场', max: 100 },
            { name: '火车站', max: 100 },
            { name: '汽车站', max: 100 },
            { name: '地铁', max: 100 }
          ],
          shape: 'circle',

          name: {
            textStyle: {
              color: '#4c9bfd',
              fontSize: 10
            }
          },
          // 坐标轴在 grid 区域中的分隔线（圆圈）
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
              // width: 2,
              // type: 'dashed'
            }
          },
          // 坐标轴轴线相关设置(竖线)axisLine
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
              // width: 1,
              // type: 'solid'
            }
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            name: '北京',
            type: 'radar',
            lineStyle: {
              normal: {
                color: '#fff',
                width: 1,
                opacity: 0.5
              }
            },
            data: [[90, 19, 56, 0.11, 34]],
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              color: '#fff'
            },
            // 在圆点上显示相关数据
            label: {
              show: true,
              color: '#fff',
              fontSize: 8
            },
            areaStyle: {
              color: 'rgba(238, 197, 102, 0.6)'
            }
          }
        ]
      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .lineEchart {
//   width: 300px;
//   height: 200px;
// }
</style>

